<template>
   <div class='home-activity'>
    <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from "vue-property-decorator"

  @Component({})

  export default class ElTree extends Vue {
    @Prop({
      required: false,
      default: ''
    }) name!: string
    data:any =  [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }]
    defaultProps:defaultPropsClass =  {
      id: 'id',
      children: 'children',
      label: 'label',
      disabled: ''
    }
    handleNodeClick(data:any) {
      console.log('data',data)
    }
    created() {
    }
  }
  export class ElTreeClass{
    public 'id': number
    public 'label': string
    public 'children': ElTreeClass[]|null
  }
  export class defaultPropsClass{
    public 'id': string
    public 'children': string
    public 'disabled': string
    public 'label': string
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/variables";

  .elTree-wrap {
    width: 100%;
  }
  .home-activity {
    width: 100%;
    height: 100%;
  }
 
  .d-header {
    color: white;
 
    .h-title {
      padding-top: 15px;
    }
  }
 
  .d-content {
    display: flex;
 
    .c-a-left {
      width: 30%;
      height: 100%;
      text-align: left;
      border-right: 2px solid light-gray;
    }
 
    .c-a-right {
      width: 70%;
      height: 100%;
    }
  }
</style>

